<template>
    <view class="tabbar-container">
        <block>
            <view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']"
                @click="changeItem(item)">
                <view class="item-top">
                    <image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
                </view>
                <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
                </view>
            </view>
        </block>
    </view>
</template>
 
<script>
export default {
    props: {
        currentPage: {
            type: Number,
            default: 0
        }
    },
    data() {
		
        return {
            currentItem: 0,
            tabbarList: [
                {
                    id: 0,
                    path: '/pages/index/redouble',
                    icon: 'https://new.qingfentool.vip/upload/image/20230630/20c04ef95373b1fa07cc75d6aec06305.png',
                    selectIcon: 'https://new.qingfentool.vip/upload/image/20230630/1525c9aff61a73a4a97461f04bfa0cde.png',
                    centerItem: false
                },
                {
                    id: 1,
                    path: '/pages/index/shopmall',
                    icon: '/static/tabbar/shop.png',
                    selectIcon: '/static/tabbar/shops.png',
                    centerItem: false
                },
                {
                    id: 2,
                    path: '/pages/index/dragon',
                    icon: 'https://new.qingfentool.vip/upload/image/20230727/b5d8545a7c114b773678000b6b5b4f46.png',
                    selectIcon: 'https://new.qingfentool.vip/upload/image/20230727/142f6f23ad8e64c9dbbaab43d042204f.png',
                    centerItem: true
                },
                {
                    id: 3,
                    path: '/pages/index/cabinetBox',
                    icon: 'https://new.qingfentool.vip/upload/image/20230630/7ece715c3346e2530fdd4de592aa90e2.png',
                    selectIcon: 'https://new.qingfentool.vip/upload/image/20230630/71b6ef6de1c5024e0a862b4ad5fe612f.png',
                    centerItem: false
                },
                {
                    id: 4,
                    path: '/pages/index/user',
                    icon: 'https://new.qingfentool.vip/upload/image/20230801/ad42c5e2451e2d3d6c88d03d55a0cee7.png',
                    selectIcon: 'https://new.qingfentool.vip/upload/image/20230801/9dcf381ce553a17962f78b8c097e9f50.png',
                    centerItem: false
                }
            ]
        };
    },
    mounted() {
        this.currentItem = this.currentPage;
        uni.hideTabBar();
    },
    methods: {
        changeItem(item) {
            let _this = this;
            // _this.currentItem = item.id;
            uni.switchTab({
                url: item.path
            });
        }
    }
};
</script>
<style>
view {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.tabbar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130rpx;
    box-shadow: 0 0 5px #999;
    display: flex;
    align-items: center;
    padding: 5rpx 0;
    color: #fff;
    background-color: #262626;
    z-index: 999999;
}

.tabbar-container .tabbar-item {
    width: 20%;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tabbar-container .item-active {
    color: #FFB02E;
}

.tabbar-container .center-item {
    display: block;
    position: relative;
}

.tabbar-container .tabbar-item .item-top {
    width: 100rpx;
    height: 100rpx;
    padding: 10rpx;
}

.tabbar-container .center-item .item-top {
    flex-shrink: 0;
    width: 130rpx;
    height: 130rpx;
    position: absolute;
    top: -50rpx;
    left: calc(50% - 62.5rpx);
}

.tabbar-container .tabbar-item .item-top image {
    width: 100%;
    height: 100%;
}

.tabbar-container .tabbar-item .item-bottom {
    /* background-color: aqua; */
    font-size: 28rpx;
    width: 100%;
}

.tabbar-container .center-item .item-bottom {
    position: absolute;
    bottom: 5rpx;
}
</style>